<template>
  <HeaderOne :activeIndex="activeIndex"></HeaderOne>
  <bread-crumb>
    <template #one>产地信息</template>
    <template #two>上传产地信息</template>
  </bread-crumb>
  <el-card shadow="always" style="margin: 20px;">
    <el-row :gutter="20" class="header">
      <search-bar
        :add-text = searchBarText.addText
        :search-text= searchBarText.searchText
        :placeholder-context= searchBarText.placeholderContext
        @initGetLandInfo="init"
        @handleDialogLandValue="handleDialogLandValue"
      >
      </search-bar>
      <one-table
        :table-data="tableData"
        :options-info="optionsLandInfo"
        @handleDialogLandValue="handleDialogLandValue"
        @delLandInfo="delLandInfo"
      >
      </one-table>
      <paging :queryForm="queryForm"
              @my-size-change="handleSizeChange"
              @my-current-change="handleCurrentChange">
      </paging>
    </el-row>
  </el-card>
  <dialog-land v-model="dialogVisible"
          v-if="dialogVisible"
          :dialogTableValue="dialogTableValue"
          :dialog-land-title="dialogTitle"
          @handleConfirm="handleConfirm"
  />
</template>

<script setup>
import {onMounted, ref} from "vue";
import {optionsLandInfo} from "@/api/options/onePart/optionsLandInfo.js";
import {addLandInfo, deleteLandInfo, editLandInfo, upLandInfo} from "@/api/apiPath/onePartApi.js";
import {ElNotification} from "element-plus";
import Dialog from "@/components/dialog/one/dialogLand.vue";
import {isNull} from "@/api/filters.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import HeaderOne from "@/components/header/headOne.vue"
import Paging from "@/components/pagination/paging.vue";
import OneTable from "@/components/table/oneTable.vue";
import SearchBar from "@/components/commons/searchBar.vue";
import BreadCrumb from "@/components/commons/breadCrumb.vue";
import {initTableInfo} from "@/api/methods/initInfo.js";
import {addTableInfo} from "@/api/methods/addInfo.js";
import {updateFormInfo} from "@/api/methods/updateInfo.js";
import {delTableInfo} from "@/api/methods/delInfo.js";
import DialogLand from "@/components/dialog/one/dialogLand.vue";

const activeIndex = ref(`/upLoadLandInfo`)
const tableData = ref([])
const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 10,
  totalSize: 0
})
const searchBarText = ref({
  addText : "新增地块",
  searchText : "搜索地块",
  placeholderContext: "请输入地块名称"
})
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogTableValue = ref({})

const init = (query)=> {
  queryForm.value.query = query
  initTableInfo(upLandInfo(queryForm.value), tableData, queryForm)
}

onMounted(async ()=> {
  await init()
})

const handleSizeChange = (pageSize)=> {
  queryForm.value.pageSize = pageSize
  queryForm.value.pageNum = 1
  init()
}
const handleCurrentChange = (pageNum)=> {
  queryForm.value.pageNum = pageNum
  init()
}

// 判断是选新增还是编辑
const handleDialogLandValue = (row)=> {
  // console.log("bh:" + row.bh)
  console.log(isNull(row))
  if (isNull(row)) {
    dialogTitle.value = "新增地块"
    dialogTableValue.value = {}
  } else {
    dialogTitle.value = "编辑产地"
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}

// 添加数据

const handleConfirm = async (formValue, formRef)=> {
  formValue = ref(formValue)
  formRef.validate( async valid => {
    if (!valid) {
      ElMessage({
        message: "请填写完整！",
        type: 'warning',
        duration: 1500
      })
    } else {
      try {
        dialogTitle.value === '新增地块'
            ? addTableInfo(addLandInfo(), formValue, upLandInfo(queryForm.value), tableData, queryForm)
            : updateFormInfo(editLandInfo(), formValue, upLandInfo(queryForm.value), tableData, queryForm)
        dialogVisible.value = false
      }catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    }
  })
}


// 删除某行信息
const delLandInfo = (row)=> {
  ElMessageBox.confirm(
      '此操作将永久删除该信息，是否继续？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
          try {
            delTableInfo(deleteLandInfo(row.bh), tableData, queryForm, upLandInfo(queryForm.value))
          } catch (e) {
            console.log(e)
            ElNotification({
              message: "请求失败",
              type: 'error',
              duration: 1500
            })
          }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}

</script>

<style scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>













<!--
/*const initInfo = async () => {
try {
get(upLandInfo(queryForm.value), (data)=> {
tableData.value = data.info
queryForm.value.totalSize = data.totalSize
})
}  catch (err) {
console.log("errorOne" + err)
ElNotification({
message: "请求失败~",
type: 'error',
duration: 1500
})
}
}*/
/*const handleConfirm = async (form, formRef)=> {
formRef.validate( async valid => {
if (!valid) {
console.log("errorValid")
ElNotification({
// message: res.msg || "请求失败~",
message: "请求失败~",
type: 'error',
duration: 1500
})
} else {
try {
let res = dialogTitle.value === '新增地块' ? await addLandInfo(form) : await editLandInfo(form)
console.log(res)
if (res.status > 0) {
//提示成功
ElNotification({
message: res.msg,
type: 'success',
duration: 1300
})
await initInfo()
dialogVisible.value = false
} else {
ElNotification({
message: res.msg,
type: 'error',
duration: 1500
})
}
}catch (err) {
console.log("errorOne" + err)
ElNotification({
message: "请求失败~",
type: 'error',
duration: 1500
})
}
}
})

}*/

const delLandInfo = (row)=> {
  ElMessageBox.confirm(
      '此操作将永久删除该产地信息，是否继续？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
          try {
            let res = await deleteLandInfo(row.bh)
            if (res.status > 0) {
              ElMessage({
                type: 'success',
                message: '已删除',
              })
              initTableInfo(upLandInfo(queryForm.value), tableData, queryForm)
            } else {
              ElNotification({
                message: res.msg,
                type: 'error',
                duration: 1500
              })
            }
          } catch (e) {
            console.log(e)
            ElNotification({
              message: "请求失败",
              type: 'error',
              duration: 1500
            })
          }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
-->
